<script src="../../dist/mini-vue.js"></script>

<div id="demo">
  <h1>Latest MiniVue.js Commits</h1>
  <span v-for="branch in branches">
    <input
      type="radio"
      :id="branch"
      :value="branch"
      name="branch"
      v-model="currentBranch.value"
    />
    <label :for="branch">{{ branch }}</label>
  </span>
  <p>leaon4/mini-vue3@{{ currentBranch.value }}</p>
  <ul>
    <li v-for="({ html_url, sha, author, commit }) in commits.value">
      <a :href="html_url" target="_blank" class="commit"
        >{{ sha.slice(0, 7) }}</a
      >
      - <span class="message">{{ truncate(commit.message) }}</span><br />
      by
      <span class="author"
        ><a :href="author.html_url" target="_blank"
          >{{ commit.author.name }}</a
        ></span
      >
      at <span class="date">{{ formatDate(commit.author.date) }}</span>
    </li>
  </ul>
</div>

<script>
  const { createApp, ref, effect } = MiniVue;
  const API_URL = `https://api.github.com/repos/leaon4/mini-vue3/commits?per_page=3&sha=`;

  const truncate = (v) => {
    const newline = v.indexOf('\n');
    return newline > 0 ? v.slice(0, newline) : v;
  };

  const formatDate = (v) => v.replace(/T|Z/g, ' ');

  var app = createApp({
    setup() {
      const currentBranch = ref('master');
      const commits = ref(null);

      effect(() => {
        fetch(`${API_URL}${currentBranch.value}`)
          .then((res) => res.json())
          .then((data) => {
            commits.value = data;
          });
      });

      return {
        branches: ['master', 'template-explorer'],
        currentBranch,
        commits,
        truncate,
        formatDate,
      };
    },
  });
  app.mount('#demo');
</script>

<style>
  #demo {
    font-family: 'Helvetica', Arial, sans-serif;
  }

  a {
    text-decoration: none;
    color: #f66;
  }

  li {
    line-height: 1.5em;
    margin-bottom: 20px;
  }

  .author,
  .date {
    font-weight: bold;
  }
</style>
